<template>
	<view>
		<z-paging ref="pagingRef" :auto-show-back-to-top="false" :auto="false" v-model="dataList"
			:loading-more-enabled="false" :default-page-size="10" @query="queryList">
			<template #top>
				<view style="height: 50px;background-color: #c9c9c9;" >top</view>
			</template>
			<!-- 列表 -->
			<view v-for="(item, index) in dataList" :key="index">
				<view class="item">
					<view class="item-info">
						{{ item.title }}
					</view>
				</view>
			</view>
			<template #bottom>
				<view style="height: 50px;background-color: aqua;">bottom</view>
			</template>
		</z-paging>
	</view>
</template>
<script lang="ts" setup>
	import { ref, onMounted, onUnmounted } from 'vue';
	import { onLoad, onShow, onReady } from '@dcloudio/uni-app';
	const pagingRef = ref(null); //页面REF
	const dataList = ref([]); //列表数据
	onLoad(() => { });
	onShow(() => {

	});
	onReady(() => {
		pagingRef.value?.reload();
	})

	//列表查询
	const queryList = (pageNo, pageSize) => {
		const data = {
			pageNum: pageNo,
			pageSize: pageSize,
		};
		let pageList=[];
		for(let i=0;i<pageSize;i++){
			pageList.push({
				title:`title-${pageNo}-${pageSize}`
			})
		}
		pagingRef.value.complete(pageList);
	};
</script>

<style lang="scss" scoped>
	.item {
		padding: 20rpx 32rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		background-color: #ffffff;
		border-bottom: 1rpx solid #F5F6F7;
		height: 150rpx;

		&-icon {
			flex-shrink: 0;
		}

		&-info {
			display: inline-flex;
			flex-direction: column;
			justify-content: space-between;
			padding: 0 10rpx;
			font-size: 28rpx;
		}
	}
</style>